<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no,width=device-width,height=device-height"/>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/p.ico}" media="screen" />
<title>[[${vedioName}]]</title>
<style type="text/css">

.vid-wrap{  
    width:100%;background: #000;  
    position:relative;  
    padding-bottom:56.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/  
    height: 0;  
}  
.vid-wrap video{  
    position: absolute;  
    top:0;  
    left: 0;  
    width: 100%;  
    height: 100%; 
}
p{
	text-align: center;	
}  

</style>
</head>
<body>
<p style="font-size: 35px;">[[${vedioName}]]</p>
<p>(初始需等待加载,谢谢...)</p>
<div style="text-align: center;" class="vid-wrap">
<video style="width= 100%; height=100%; object-fit: fill" th:src="@{/vedio/vedio/__${vedioUrl}__}" controls="controls" autoplay="autoplay"></video>
</div>
</body>
</html>